<template>
  <div class="cart">
    <van-nav-bar
        title="我的购物车"
        fixed
    />
   <div class="goodList">
     <van-card
         v-for="(item, index) in productList"
         :v-key="index"
         :num="item.num"
         :price="item.price"
         desc="整体气韵充沛，豪放之中蕴含典雅，遒劲之中暗藏柔美，是一款非常适合把玩的杀茶利器，颇具收藏价值。"
         :title="item.name"
         :thumb="item.url"
     />
   </div>
    <van-submit-bar :price="sum" button-text="结算" @submit="onSubmit" />
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "index",
  data(){
    return{
      sum: 0
    }
  },
  created() {
    //如果是通过加入购物车跳转 则执行添加商品操作
    if(this.$route.query.product!=null){
      // this.$route.query.product.num = 1
      var product = this.$route.query.product;
      Vue.set(product,'num',1);//解决不能及时更新
      // this.proList.push(product)
      this.addProduct(product);
    }
  },
  computed:{
    productList(){
      return this.$store.state.proList;//将vue中的数据通过计算属性获取
    }
  },
  methods:{
    addProduct(product){
      this.$store.commit('add',product);
    },
    onSubmit(){
      this.$notify({type: 'success',message:'提交成功!'});
      setTimeout(()=>{
        this.$router.push({
          path: '/me',
          query:{
            tab: 4
          }
        });
      },2000)
    }
  },
  watch:{
    productList:{
      deep: true,//深度监听 检测到数量变化 重新计算价格
      immediate: true,//立即执行
      handler(n){
        var sum = 0;
        for(let i of n){
          sum += i.price*i.num;//递加商品价格
        }
        this.sum = sum*100;
      }
    }
  }
}
</script>

<style scoped>
.van-submit-bar{
  bottom: 50px !important;
  border-bottom: 1px solid #F2F2F2;
}
.goodList{
  padding-top: 60px;
}
</style>
